<template>
    <div>
         <!-- 面包屑导航区 -->
         <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>角色列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
              <el-button type="primary">添加角色</el-button>
          <!-- 表格区域 -->
         <el-table :data="rolesList" border stripe>
            <!-- 展开行 -->
            <el-table-column type="expand" default-expand-all>
                <template slot-scope="{row}">
                    <el-row :class="['bdtottom',i1 === 0 ? 'dbtop' : '' ,'juzhong' ]" v-for="(item1,i1) in row.children" :key="item1.id">
                        <!-- 渲染一级分类 -->
                        <el-col :span="5">
                            <el-tag >{{item1.authName}}</el-tag>
                            <i class="el-icon-right"></i>
                        </el-col>
                        <!-- 渲染二级和三级分类 -->
                        <el-col :span="19">
                            <!-- 二级 -->
                            <el-row :class="[i2===0 ? '' : 'dbtop','juzhong']" v-for="(item2,i2) in item1.children" :key="item2.id">
                                <el-col :span="6">
                                    <el-tag type="success">{{item2.authName}}</el-tag>
                                    <i class="el-icon-right"></i>
                                </el-col>
                                <!-- 三级 -->
                                <el-col :span="18" >
                                    <el-tag type="warning"
                                     v-for="(item3) in item2.children" 
                                     :key="item3.id"
                                     closable 
                                     @close="removeRightById(row,item3.id)"
                                     >
                                     {{item3.authName}}</el-tag>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </template>
                    
           </el-table-column>


            <el-table-column   type="index" label="#">  </el-table-column>
            <el-table-column  prop="roleName"  label="角色名称"  >  </el-table-column>
            <el-table-column  prop="roleDesc"  label="角色描述"  >  </el-table-column>
            <el-table-column  label="操作"  >
                <template slot-scope="{row}">
                    <el-button type="primary" size="small" icon="el-icon-edit" >编辑</el-button>
                    <el-button type="danger" size="small" icon="el-icon-delete" >删除</el-button>
                    <el-button type="warning" size="small" icon="el-icon-delete" @click="setPermiss(row)">分配权限</el-button>
                </template>
            </el-table-column>
           
         </el-table>
        </el-card>

        <!-- 分配权限的对话框 -->
              <el-dialog
              @close='closeClear'
                title="分配权限"
                :visible.sync="dialogVisible"
                width="40%"
                
                >
                <!-- 树形组件 -->
                <el-tree :data="fenRolesList"
                    :props="treeProps"
                    node-key='id'
                    default-expand-all 
                    show-checkbox
                    ref="treeRef"
                    :default-checked-keys ='defKeys'
                    ></el-tree>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click='allotPermiss'>确 定</el-button>
                </span>
            </el-dialog>
    </div>
</template>

<script>
    export default {
        name:'rolesIndex',
        data () {
            return {
                rolesList:[],
                dialogVisible:false,
                fenRolesList:[],
                treeProps:{
                    children:'children',
                    label:'authName'
                },
                defKeys:[],
                permiseeId:''
            }
        },
        created(){
            this.getRolesList()
        },
        methods:{
            async getRolesList(){
               const {data:res} =await this.$http.get('/roles')
               if(res.meta.status !== 200) return this.$message.error('获取用户角色失败')
               this.rolesList = res.data
           },
          //分配权限的按钮
         async  setPermiss(row){
           const {data:res} =  await this.$http.get('rights/tree')
           if(res.meta.status !== 200) return this.$message.error('获取权限列表失败')
            this.fenRolesList = res.data
              this.dialogVisible = true
            this.getLeafKeys(row,this.defKeys)

            this.permiseeId = row.id
           },
           //写一个递归函数,遍历数据,找到三级节点
           //随便写两个形参 val arr val代表要遍历的数据 arr代表找到节点之后要放进的数组

           getLeafKeys(val,arr){
              if(!val.children){
                 return arr.push(val.id)
              }else{
                 val.children.forEach(v => {
                    this.getLeafKeys(v,arr)
                 })
              }
           },
        //   删除用户权限操作
          async removeRightById(roleId,rightId){
               const confirmResult =   await  this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).catch(err => err)
                    if(confirmResult !== 'confirm'){
                        return this.$message.info('取消了删除')
                    }
                    const {data:res} = await this.$http.delete(`roles/${roleId.id}/rights/${rightId}`)
                    if(res.meta.status !== 200) return this.$message.error('删除用户权限失败')
                    roleId.children = res.data
           },
           //这是解决一个小bug 点击主管的权限分配 再点击第二个的权限分配 第二个权限里面会有第一里面的权限
           //原因是 上面的递归函数 给defKeys 赋值之后,在在关闭弹框的时候 应该把defKeys 清空
           //章节 90
           closeClear(){
            this.defKeys = []
           },
           //点击确定开始分配权限
         async  allotPermiss(){
              const keys = [
                ...this.$refs.treeRef.getCheckedKeys(),
                ...this.$refs.treeRef.getHalfCheckedKeys(),
               ]
                const strKeys = keys.join(',')
                const {data:res} = await this.$http.post(`roles/${this.permiseeId}/rights`,{rids:strKeys})
                if(res.meta.status !== 200) return this.$message.error('分配权限失败')
                this.$message.success('分配权限成功')
                this.getRolesList()
                this.dialogVisible = false
           }
        }
    }
</script>

<style lang="less" scoped>
.el-breadcrumb{
     margin-bottom: 15px;
}
     .el-table{
        margin-top: 15px;
     }
     .el-tag{
        margin: 7px;
     }
     .dbtop{
        border-top: 1px solid #eee;
     }
     .bdtottom{
        border-top: 1px solid #eee;
     }
     .juzhong{
        display: flex;
        align-items: center;
     }
</style>